<template>
    <div class="container">
        <h2 class="header-h">胎心监护</h2>
        <!-- 建册数据 -->
        <el-row :gutter="20" class="header">
            <el-col :span="7" class="h-1">
                <div class="text-sm text-gray-500">胎心率</div>
                <div class="text-2xl font-medium text-blue-600">142 bpm</div>
            </el-col>
            <el-col :span="7" class="h-2">
                <div class="text-sm text-gray-500">宫缩频率</div>
                <div class="text-2xl font-medium text-green-600">3 次/10分钟</div>
            </el-col>
            <el-col :span="7" class="h-3">
                <div class="text-sm text-gray-500">监测时长</div>
                <div class="text-2xl font-medium text-purple-600">25:30</div>
            </el-col>
        </el-row>
        <!-- 胎心监护的图标 -->
        <div class="mb-8">
            <div id="monitorChart" ref="monitorChartRef" style="height: 400px;width: 900px;"></div>
        </div>
        <!--  -->
        <el-row :gutter=20>
            <el-col :span="11">
                <h3 class="text-lg font-medium mb-4">异常情况记录</h3>
                <div class="space-y-4">
                    <div v-for="(alert, index) in alertRecords" :key="index" class="p-4 bg-red-50 rounded-lg mb-4">
                        <div class="flex items-center">
                            <el-icon class="text-red-500 mr-2">
                                <Warning />
                            </el-icon>
                            <span class="text-red-700">{{ alert.message }}</span>
                        </div>
                        <div class="text-sm text-red-500 mt-2">{{ alert.time }}</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="11">
                <h3 class="text-lg font-medium mb-4">监测报告</h3>
                <div class="p-6 border rounded-lg " style="border:1px solid #e5e7eb;">
                    <div class="space-y-4">
                        <div class="flex justify-between mb-4">
                            <span class="text-gray-500">监测日期</span>
                            <span>2024-01-20</span>
                        </div>
                        <div class="flex justify-between mb-4">
                            <span class="text-gray-500">监测时长</span>
                            <span>40分钟</span>
                        </div>
                        <div class="flex justify-between mb-4">
                            <span class="text-gray-500">基线水平</span>
                            <span>正常</span>
                        </div>
                        <div class="flex justify-between mb-4">
                            <span class="text-gray-500">变异性</span>
                            <span>良好</span>
                        </div>
                    </div>

                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script setup>
import {ref,onMounted} from  'vue'
import * as echarts from 'echarts';
// 胎心监护相关数据
const monitorChartRef = ref();
const alertRecords = [
    { message: '胎心率短暂降至110以下', time: '10:25' },
    { message: '宫缩频率增加', time: '10:15' }
]
onMounted(()=>{
    // 初始化胎心监护图表
    if (monitorChartRef.value) {
        const monitorChart = echarts.init(monitorChartRef.value);
        const monitorOption = {
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: Array.from({ length: 60 }, (_, i) => i)
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: Array.from({ length: 60 }, () => Math.random() * 40 + 120),
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#3B82F6'
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(59,130,246,0.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(59,130,246,0)'
                        }]
                    }
                }
            }]
        };
        monitorChart.setOption(monitorOption);
    }

})

</script >
<style lang="less" scoped>
.header .el-col{
    padding: 1rem;
    border-radius: 0.5rem;
    margin-left: 20px;
}
.h-1{
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity));

}
.h-2{
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity));
    
}
.h-3{
    --tw-bg-opacity: 1;
    background-color: rgb(250 245 255 / var(--tw-bg-opacity));
}
.header-h{
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: 1.5rem;
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.font-medium {
    font-weight: 500;
}
.text-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(37 99 235 / var(--tw-text-opacity));
}
.text-green-600 {
    --tw-text-opacity: 1;
    color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-purple-600 {
    --tw-text-opacity: 1;
    color: rgb(147 51 234 / var(--tw-text-opacity));
}
.mb-8 {
    margin-bottom: 2rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.p-4 {
    padding: 1rem;
}

.rounded-lg {
    border-radius: 0.5rem;
}
.p-6 {
    padding: 1.5rem;
}
.border {
    border-width: 1px;
}
.flex {
    display: flex;
}
.justify-between {
    justify-content: space-between;
}
.items-center {
    align-items: center;
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}
.bg-red-50 {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.text-red-500 {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}
.text-red-700 {
    --tw-text-opacity: 1;
    color: rgb(185 28 28 / var(--tw-text-opacity));
}

.mr-2 {
    margin-right: 0.5rem;
}

</style>